<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { useRoute } from "vue-router";
import { requestAlbumDynamic } from "../../utils/axiosURL"
import indexText from "./index.json"


const route = useRoute()
const albumID = ref<number | any>(route.params.id)
const albumImg = ref<string | any>(route.query.url)
const albumName = ref<string | any>(route.query.name)
const albumTime = ref<number | any>(route.query.time)
const albumSingerName = ref<string | any>(route.query.singerName)
// 子路由下标
let childIndex = ref<number>(0)

// 存储专辑详情的动态数据
const albumDynamicData = reactive<any>({})

// 请求专辑动态数据
const requestAlbumDynamicFn = () => {
  requestAlbumDynamic(albumID.value).then(data => {
    albumDynamicData.values = data
  }).catch(_ => { })
}

onMounted(() => {
  requestAlbumDynamicFn()
})

</script>

<template>
  <div class="totalWrap">
    <div class="singerDetailWrap">
      <div class="leftWrap">
        <img :src="albumImg" alt="">
        <div class="pseudo">
          <div class="pseudo_cir"></div>
        </div>
      </div>
      <div class="rightDesc">
        <p class="infoTitle">
          <span>{{ indexText.VIP_Album }}</span>
          <span>{{ albumName }}</span>
        </p>
        <div class="moreFunctions">
          <div class="addplay">
            <div class="addplay_Left">
              <span class="iconfont icon-xiasanjiaoxing"></span>
              <span>{{ indexText.openVIP }}</span>
            </div>
          </div>
          <div class="collectionAll">
            <span class="iconfont icon-wj-wjj"></span>
            <span>{{ indexText.COLLECTION }}
              ({{
                albumDynamicData.values?.subCount >= 10000
                ? Math.ceil(albumDynamicData.values?.subCount / 10000000) + '亿'
                : albumDynamicData.values?.subCount >= 10000
                  ? Math.ceil(albumDynamicData.values?.subCount / 10000) + '万'
                  : albumDynamicData.values?.subCount
              }})
            </span>
          </div>
          <div class="share">
            <span class="iconfont icon-fenxiang"></span>
            <span>
              {{ indexText.SHARE }}
              ({{
                albumDynamicData.values?.shareCount >= 10000
                ? Math.ceil(albumDynamicData.values?.shareCount / 10000) + '万'
                : albumDynamicData.values?.shareCount
              }})
            </span>
          </div>
          <div class="downloadAll">
            <span class="iconfont icon-xiazai"></span>
            <span>{{ indexText.DOWNLOAD }}</span>
          </div>
        </div>
        <p class="singer">
          <span>{{ indexText.SINGER }}: </span>
          <span class="songLabel">{{ albumSingerName }}</span>
        </p>
        <p class="time">
          <span>{{ indexText.TIME }}: </span>
          <span class="songLabel">
            {{
              new Date(parseInt(albumTime)).getFullYear()
              + '-' + (new Date(parseInt(albumTime)).getMonth() + 1)
              + '-' + new Date(parseInt(albumTime)).getDate()
            }}
          </span>
        </p>
      </div>
    </div>
    <div class="navChild">
      <ul class="childNavBox">
        <li v-for="(item, index) in indexText.childNav" @click="() => childIndex = index"
          :class="index === childIndex ? 'active' : ''">
          <RouterLink :to="{ path: item.to, query: { id: albumID } }">
            {{ item.name }}
            <span v-if="index === 1">({{ albumDynamicData.values?.commentCount }})</span>
          </RouterLink>
        </li>
      </ul>
    </div>
    <RouterView />
  </div>
</template>

<style lang="scss" scoped>
.totalWrap {
  @extend .pageWrapSize;

  .singerDetailWrap {
    display: flex;
    width: 100%;
    height: 220px;
    padding-left: 30px;
    box-sizing: border-box;

    .leftWrap {
      display: flex;
      align-items: center;
      flex-basis: 220px;
      height: 220px;

      img {
        flex-basis: 75%;
        width: 85%;
        height: 85%;
        border-radius: 8px;
      }

      .pseudo {
        position: relative;
        flex: 1;
        height: 85%;

        .pseudo_cir {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;

          &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: -190px;
            margin: auto;
            content: "";
            width: 200px;
            height: 200px;
            background: repeating-radial-gradient(#252525 6px,
                #000 10px);
            border-radius: 50%;
          }
        }

        &::before {
          z-index: 1;
          content: "";
          position: absolute;
          top: 6px;
          left: 0;
          width: 0;
          height: 30%;
          border-style: solid solid solid solid;
          border-width: 6px 0px 6px 6px;
          border-color: rgba(218, 214, 215, 0.28) transparent transparent rgba(218, 214, 215, 0.28);
          border-radius: 4px;
        }

        &::after {
          content: "";
          position: absolute;
          bottom: 6px;
          left: 0;
          width: 0;
          height: 30%;
          border-style: solid solid solid solid;
          border-width: 6px 0px 6px 6px;
          border-color: transparent transparent rgba(218, 214, 215, 0.28) rgba(218, 214, 215, 0.28);
          border-radius: 4px;
        }
      }
    }

    .rightDesc {
      flex: 1;
      padding-top: 20px;
      box-sizing: border-box;

      .infoTitle {
        font-family: $activeTextFont;
        font-size: $font-size-lg2;
        margin-bottom: 14px;

        span:nth-child(1) {
          font-family: $activeTextFont;
          font-size: $font-size-xs;
          // border: 1px solid $theme-red;
          border-width: 1px;
          border-style: solid;
          @include border_color('border_color');
          @include author_color('author_color');
          // color: $font_red_color;
          padding: 3px 4px 0px;
          margin-right: 10px;
          border-radius: 3px;
          vertical-align: 3px;
        }
      }

      .moreFunctions {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        margin-bottom: 16px;

        .addplay {
          display: flex;
          height: 30px;
          padding-right: 10px;
          border-radius: 25px;
          overflow: hidden;
          // background-color: $theme-red;
          @include background_color('bk_color');

          .addplay_Left {
            display: flex;
            justify-content: space-around;
            align-items: center;
            // color: $theme-white;
            @include color('color');
            font-family: $textFont;

            .icon-xiasanjiaoxing {
              transform: translateX(5px) rotate(-90deg);
              font-size: 20px;
              margin-right: 8px;
            }

            &:hover {
              background-color: rgb(204, 50, 50);
            }
          }

          &:hover {
            cursor: pointer;
            background-color: rgb(215, 53, 53);
          }
        }

        .collectionAll {
          display: flex;
          justify-content: center;
          align-items: center;
          width: auto;
          height: 30px;
          margin-left: 15px;
          padding: 0 10px;
          box-sizing: border-box;
          border-radius: 25px;
          font-family: $textFont;
          color: gray;
          border: .2px solid rgb(206, 206, 206);

          span:nth-child(1) {
            font-size: 20px;
            margin-right: 4px;
          }

          &:hover {
            background-color: rgb(242, 242, 242);
            cursor: pointer;
          }
        }

        .share {
          display: flex;
          justify-content: center;
          align-items: center;
          width: auto;
          height: 30px;
          margin-left: 15px;
          padding: 0 10px;
          box-sizing: border-box;
          border-radius: 25px;
          font-family: $textFont;
          color: gray;
          border: .2px solid rgb(206, 206, 206);

          span:nth-child(1) {
            font-size: 20px;
            margin-right: 4px;
          }

          &:hover {
            background-color: rgb(242, 242, 242);
            cursor: pointer;
          }
        }

        .downloadAll {
          display: flex;
          justify-content: center;
          align-items: center;
          width: auto;
          height: 30px;
          margin-left: 15px;
          padding: 0 10px;
          box-sizing: border-box;
          border-radius: 25px;
          font-family: $textFont;
          color: gray;
          border: .2px solid rgb(206, 206, 206);

          span:nth-child(1) {
            font-size: 20px;
            margin-right: 4px;
          }

          &:hover {
            background-color: rgb(242, 242, 242);
            cursor: pointer;
          }
        }
      }

      .singer,
      .time {
        font-size: $font-size-sm;
        font-family: $textFont;
        margin-bottom: 16px;

        >p {
          color: $font_main_color;
          line-height: 18px;

          &:nth-child(3) {
            width: 500px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .songLabel {
            color: rgb(11, 88, 176);
            margin-right: 8px;
          }

          .playNum {
            margin-left: 20px;
          }
        }
      }
    }
  }

  .navChild {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    padding-left: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
    box-sizing: border-box;

    .childNavBox {
      flex-basis: 600px;
      display: flex;

      li {
        margin-right: 20px;
        line-height: 30px;
        font-size: 15px;
        font-family: $textFont;
      }

      .active {
        position: relative;
        font-size: $font-size-lg;
        font-family: $activeTextFont;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 3px;
          @include background_color('bk_color');
        }
      }
    }

    .charts {
      display: flex;
      justify-content: space-between;
      margin-right: 20px;
      border-radius: 4px;
      overflow: hidden;

      span {
        font-size: $font-size-xs;
        color: $font_second_color;
        padding: 4px 8px;
        background-color: rgb(242, 242, 242);
      }

      .chartActive {
        background-color: rgb(191, 191, 191);
        color: $theme-white;
      }
    }
  }
}
</style>
